{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 一文摸摸小程序的底\n",
    "\n",
    "写在前面的话：**算不了入门教程，只能算这几晚的摸索教程，下次会出一篇`一文入门小程序`**\n",
    "\n",
    "本文示例源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base>\n",
    "\n",
    "## 1.屁话一箩筐\n",
    "\n",
    "有些同志留言说我消失了，文章更新频率比以前慢多了？我这边先统一回复一下：\n",
    "\n",
    "最近这`几个月`利用空闲时间把**三国**读完了（咳，别问我为什么读，就是突然想读了）\n",
    "> PS：有空聊聊呗~\n",
    "\n",
    "然后最近`两个星期`迷上了**读书**，回头可能会发点读书笔记，推荐几本不错的书给大家\n",
    "\n",
    "然后就是`上次发文`，修复Shopee上传限制的时候使用了下`JQ`来快速实现\n",
    "> PS：说到底还是个后端偏数据方向的，也就`JQ`还记得。。。\n",
    "\n",
    "然后本着专研的精神，又把`H5`复习了一下\n",
    "> PS：几年前曾经在旧博客写过H5的读书笔记\n",
    "\n",
    "本来准备找下思维导图快速过下的，之后发现。。。当时懒了一下，只是发图，所以。。`丢包了`。。。\n",
    "> PS：于是最近几天闲暇之余`W3C`逛的比较多\n",
    "\n",
    "然后先是改写了上次的脚本，再写了`H5`的markdown`草稿`\n",
    "> PS：过几天你们应该可以看到了，咳，人老了~容易疲劳。。让我先缓缓。。先缓缓\n",
    "\n",
    "然后专研的毛病又来了，草稿写到导航和多媒体的时候想用小程序试试，毕竟现在是小程序的天下了\n",
    "> PS：之前前给亲戚弄小程序的时候研究了1个晚上，发现不是很难，然后现在想到了\n",
    "\n",
    "然后发现~前端的东西的确不难，但是我这人有个毛病：喜欢追求页面的美感。。\n",
    "\n",
    "于是发现。。demo几分钟搞定了，为了调个漂亮样式却耗去几小时。。。\n",
    "> PS：本来今天可以早点休息的，于是乎~陪大家熬个夜吧。。。\n",
    "\n",
    "## 2.记录点小程序功能点\n",
    "\n",
    "我用的不多，简单引入一下，小程序API用起来很简单的，更全的可以去官方查看\n",
    "> PS：唉，还是Python官方文档最省心啊~\n",
    "\n",
    "**话说，以后还是老老实实先把上面几个系列文章清了再说吧~**\n",
    "> PS：清了以后，我还会回来的~\n",
    "\n",
    "### 2.1.前言\n",
    "\n",
    "`小程序|公众号`登录注册页面：<https://mp.weixin.qq.com/>\n",
    "> 这个太简单，就不浪费时间了，贴个官方教程：<https://developers.weixin.qq.com/miniprogram/dev/#申请帐号>\n",
    "\n",
    "下载开发工具：<https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html>\n",
    "\n",
    "新建个简单项目：\n",
    "![1.创建小程序.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190325224116723-28315307.png)\n",
    "\n",
    "项目基本配置：一般在详细里面改就行了\n",
    "![2.配置文件.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190325224600194-98472293.png)\n",
    "\n",
    "文件简单介绍：（图说的很清楚了）\n",
    "![3.文件介绍.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190325225154791-1001356193.png)\n",
    "\n",
    "**PS：用法和css一样，在小程序中像素单位全部用`rpx`（类似于`rem`）**\n",
    "> `rpx`: 可以根据屏幕宽度进行自适应，文档：<https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html>\n",
    "\n",
    "**PS：小程序支持的标签**：<https://developers.weixin.qq.com/miniprogram/dev/component/>\n",
    "\n",
    "下面开始就记录下遇到的**小技术点**：\n",
    "\n",
    "### 2.2.页面初始数据的使用\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/1data>\n",
    "\n",
    "#### 2.2.1.获取\n",
    "\n",
    "在页面的data中定义了几个字段：\n",
    "![3.data.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190325230857294-116538029.png)\n",
    "\n",
    "想在页面中显示只需要写成`{{xxx}}`即可\n",
    "![3.渲染.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190325231045040-1440724405.png)\n",
    "\n",
    "**PS：你每次保存，左边都会有预览的**\n",
    "\n",
    "---\n",
    "\n",
    "**`{{xxx}}`也可以在样式和属性中哦~**（`wxss和css用法一样`）\n",
    "\n",
    "贴下demo：（支持的标签看官方文档即可）\n",
    "```html\n",
    "<!--index.wxml-->\n",
    "<view class='container'>\n",
    "  <view class='{{my_class}}'>{{name}}</view>\n",
    "  <view>{{age}}</view>\n",
    "  <view>{{work.name}}</view>\n",
    "  <view>{{work.location}}</view>\n",
    "</view>\n",
    "```\n",
    "脚本：（支持ES6语法）\n",
    "```js\n",
    "//index.js\n",
    "Page({\n",
    "  data: {\n",
    "    name: \"小明\",\n",
    "    age: 23,\n",
    "    work: {\n",
    "      \"name\": \"微软\",\n",
    "      \"location\": \"中国\"\n",
    "    },\n",
    "    my_class: \"red\"\n",
    "  },\n",
    "  onLoad: function() {\n",
    "    console.log(\"页面加载完成\");\n",
    "  }\n",
    "})\n",
    "```\n",
    "样式：\n",
    "```css\n",
    "/* index.wxss */\n",
    "view {\n",
    "  padding: 10rpx;\n",
    "}\n",
    "\n",
    ".red {\n",
    "  color: red;\n",
    "}\n",
    "```\n",
    "效果演示：\n",
    "![3.渲染2.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190325231648198-915308454.png)\n",
    "\n",
    "---\n",
    "\n",
    "#### 2.2.2.设置\n",
    "\n",
    "`知识点`：\n",
    "- **获取：`this.data.xxx`**\n",
    "- **设置：`this.setData({xxx:xx})`**\n",
    "- **绑定事件：在标签中添加`bindtap=\"自定义方法\"`属性**\n",
    "\n",
    "来个修改页面初始数据的案例：（官方说先修改js中的值，然后异步修改页面中的值）\n",
    "```html\n",
    "<!--index.wxml-->\n",
    "<view class='container'>\n",
    "  <view class='{{my_class}}'>{{name}}</view>\n",
    "  <view>{{age}}</view>\n",
    "  <view>{{work.name}}</view>\n",
    "  <view>{{work.location}}</view>\n",
    "  <button bindtap='update_info'>点我就修改</button>\n",
    "</view>\n",
    "```\n",
    "脚本文件：\n",
    "```js\n",
    "//index.js\n",
    "Page({\n",
    "  data: {\n",
    "    name: \"小明\",\n",
    "    age: 23,\n",
    "    work: {\n",
    "      \"name\": \"微软\",\n",
    "      \"location\": \"中国\"\n",
    "    },\n",
    "    my_class: \"red\"\n",
    "  },\n",
    "  onLoad: function() {\n",
    "    console.log(\"页面加载完成\");\n",
    "  },\n",
    "  // 自定义方法  // look：新增内容\n",
    "  update_info: function() {\n",
    "    // this对象经常容易变，我一般都存一份\n",
    "    var that = this;\n",
    "    // 后台获取data里的值\n",
    "    console.log(that.data.name, that.data.age)\n",
    "    // 修改data(直接赋值没用)\n",
    "    that.setData({\n",
    "      age: 25,\n",
    "      name: \"小华\",\n",
    "      work: {\n",
    "        \"name\": \"苹果\",\n",
    "        \"location\": \"美国\"\n",
    "      }\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "效果展示：\n",
    "![3.点我修改.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327070604273-667627718.gif)\n",
    "\n",
    "---\n",
    "\n",
    "## 3.弹框提醒\n",
    "\n",
    "官方文档：<https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html>\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/2show>\n",
    "\n",
    "**知识点：`wx.showToast({title:'内容',icon:'什么图标',duration:多少毫秒})`**\n",
    "\n",
    "在View中添加按钮：\n",
    "```html\n",
    "<button bindtap='show_msg1'>点我弹两行</button>\n",
    "<button bindtap='show_msg2'>点我就成功</button>\n",
    "```\n",
    "脚本中添加自定义方法：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    title1: '你知道吗？这是可以显示多行的弹框提醒~\\r\\n你知道吗？这是可以显示多行的弹框提醒~\\r\\n你知道吗？这是可以显示多行的弹框提醒~',\n",
    "    title2: '一二三四五六七八'\n",
    "  },\n",
    "  onLoad: function() {\n",
    "    console.log(\"页面加载完成\");\n",
    "  },\n",
    "  // 弹框提醒\n",
    "  show_msg1: function() {\n",
    "    wx.showToast({\n",
    "      title: this.data.title1,\n",
    "      icon: 'none', // 可以显示2行\n",
    "      duration: 2000 // 默认1500\n",
    "    })\n",
    "  },\n",
    "  // 弹框提醒\n",
    "  show_msg2: function() {\n",
    "    // 默认只能显示7个中文字\n",
    "    wx.showToast({\n",
    "      title: this.data.title2\n",
    "    })\n",
    "  }\n",
    "})\n",
    "```\n",
    "效果演示：（**`\\r\\n`可能在PC调试的时候不换行，但是可以在手机中换行**）\n",
    "![4.默认弹框.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326104652801-934338968.png)\n",
    "![4.两行弹框.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326104732515-980510372.png)\n",
    "\n",
    "---\n",
    "\n",
    "## 4.页面自定义属性值\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/3data>\n",
    "\n",
    "### 4.1.H5的自定义属性值\n",
    "\n",
    "说这个之前，先普及一下H5的这方面知识：\n",
    "**`自定义属性`**：在标签中的`data-自定义属性名`（为了规范化）\n",
    "1. 获取自定义属性：`dom.dataset.自定义属性名` or `dom.dataset[\"自定义属性名\"]`\n",
    "2. 设置自定义属性：`dom.dataset.自定义属性名 = xxx` or `dom.dataset[\"自定义属性名\"] = xxx`\n",
    "3. 删除自定义属性：`delete dom.dataset.自定义属性名` or `delete dom.dataset[\"自定义属性名\"]`\n",
    "4. 一般属性：\n",
    "    - 获取某个属性：`dom.getAttribute(\"属性名\")`\n",
    "    - 删除某个属性：`dom.removeAttribute(\"属性名\")`\n",
    "    - 设置某个属性：`dom.setAttribute(\"属性名\", \"值\")`\n",
    "    - 是否包含属性：`dom.hasAttribute(\"属性名\")`\n",
    "\n",
    "举个栗子：\n",
    "```html\n",
    "<div class=\"test\" data-name=\"mmd\" data-test-one=\"test\">自定义属性</div>\n",
    "<script>\n",
    "    // 获取标签的自定义属性值\n",
    "    let list = document.querySelector(\".test\").dataset;\n",
    "    // 获取：dom.dataset.自定义属性名（属性名不包含`data-`)\n",
    "    console.log(list.name);\n",
    "    // PS：test-one名字会改成驼峰命名的变量：testOne\n",
    "    console.log(list.testOne)\n",
    "    // 设置：dom.dataset.自定义属性名 = xxx or dataset[自定义属性名] = xxx\n",
    "    list.name = \"小明\"; // 标签中对应值会变成小明\n",
    "    list.age = 23; // 添加一个属性\n",
    "    // PS：设置为data-test-two\n",
    "    list.testTwo = \"test2\";\n",
    "</script>\n",
    "```\n",
    "输出效果：\n",
    "![/h5/2019-03-16/3.h5api.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190324083824298-83228614.png)\n",
    "\n",
    "### 4.2.小程序版\n",
    "\n",
    "官方文档：<https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html>\n",
    "\n",
    "**知识点：`设置hover样式`：在标签内置了`hover-class=\"xxx\"`属性**\n",
    "\n",
    "view：\n",
    "```html\n",
    "<view class='container'>\n",
    "  <view data-name='小张' data-age='22' bindtap='get_datas' hover-class='hover'>点我获取data值</view>\n",
    "</view>\n",
    "```\n",
    "js：（ES6语法忘记的同志可以去之前写的<a href=\"https://www.cnblogs.com/dotnetcrazy/p/10061671.html\" target=\"_blank\">一文读懂ES6</a>）\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    title: '获取Data属性的值'\n",
    "  },\n",
    "  onLoad: function(options) {\n",
    "    // 设置标题\n",
    "    wx.setNavigationBarTitle({\n",
    "      title: this.data.title,\n",
    "    });\n",
    "  },\n",
    "  get_datas: function(e) {\n",
    "    console.log(e);\n",
    "    let infos = e.currentTarget.dataset;\n",
    "    // 显示弹框\n",
    "    wx.showToast({\n",
    "      title: `Name：${infos.name}，Age：${infos.age}`, // ES6语法\n",
    "      icon: 'none'\n",
    "    })\n",
    "  }\n",
    "})\n",
    "```\n",
    "样式：\n",
    "```css\n",
    ".hover {\n",
    "  color: green;\n",
    "}\n",
    "```\n",
    "动态演示：\n",
    "![5.获取data属性.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326111307038-1932379785.gif)\n",
    "\n",
    "---\n",
    "\n",
    "## 5.小程序标题\n",
    "\n",
    "官方文档：<https://developers.weixin.qq.com/miniprogram/dev/api/wx.setNavigationBarTitle.html>\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/4title>\n",
    "\n",
    "**知识点：`wx.setNavigationBarTitle({title:\"xxx\"})`**\n",
    "\n",
    "view：\n",
    "```html\n",
    "<view class='container'>\n",
    "  <text>这是一个测试页面</text>\n",
    "</view>\n",
    "```\n",
    "js文件：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    title: '欢迎光临'\n",
    "  },\n",
    "  onLoad: function(options) {\n",
    "    // 设置标题\n",
    "    wx.setNavigationBarTitle({\n",
    "      title: this.data.title,\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "效果演示：\n",
    "![5.标题.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326105906987-531269632.png)\n",
    "\n",
    "---\n",
    "\n",
    "## 6.拨打电话\n",
    "\n",
    "官方文档：<https://developers.weixin.qq.com/miniprogram/dev/api/wx.makePhoneCall.html>\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/6tel>\n",
    "\n",
    "**知识点：`wx.makePhoneCall({phoneNumber:\"xx\"})`**\n",
    "\n",
    "view:\n",
    "```html\n",
    "<view class='container'>\n",
    "  <view hover-class='hover'>\n",
    "    <text data-tel='{{tel}}' bindtap='call_tel'>{{info}}{{tel}}</text>\n",
    "  </view>\n",
    "</view>\n",
    "```\n",
    "js：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    info: \"客服电话：\",\n",
    "    tel: \"95017\"\n",
    "  },\n",
    "  onLoad: function(options) {},\n",
    "  call_tel: function() {\n",
    "    // 打电话\n",
    "    wx.makePhoneCall({\n",
    "      phoneNumber: this.data.tel\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "动态演示：\n",
    "![8.call.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326140939062-1334196460.gif)\n",
    "\n",
    "---\n",
    "\n",
    "## 7.图片背景\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/5img>\n",
    "\n",
    "### 7.1.背景图片\n",
    "\n",
    "这个和html一样，CSS3就可以实现了\n",
    "\n",
    "wxml:\n",
    "```html\n",
    "<view class='container bg'>\n",
    "  <view>This is Test</view>\n",
    "</view>\n",
    "```\n",
    "wxss:\n",
    "```css\n",
    ".container {\n",
    "  height: 1500rpx;\n",
    "}\n",
    "\n",
    ".bg {\n",
    "  /* 设置背景图片的尺寸 */\n",
    "  background-size: 100% 100%; /* CSS3 */\n",
    "  /* 不支持本地图片，可以使用Base64或者允许域名下的图片 */\n",
    "  background-image: url(...省略);\n",
    "}\n",
    "```\n",
    "动态展示：\n",
    "![7.填充页面.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326122114318-463714131.gif)\n",
    "\n",
    "### 7.2.页面填充\n",
    "\n",
    "官方文档：<https://developers.weixin.qq.com/miniprogram/dev/component/image.html>\n",
    "\n",
    "**PS：图片懒加载：`lazy-load=\"true\"`**\n",
    "\n",
    "wxml:\n",
    "```html\n",
    "<view class='container'>\n",
    "  <!-- 高度自适应 -->\n",
    "  <image class=\"bg\" src=\"../../images/bg.jpg\" mode=\"widthFix\"></image>\n",
    "</view>\n",
    "```\n",
    "wxss:\n",
    "```css\n",
    ".container {\n",
    "  padding: 0rpx;\n",
    "}\n",
    "\n",
    ".bg {\n",
    "  width: 100%;\n",
    "}\n",
    "```\n",
    "动态展示：\n",
    "![7.填充页面.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326122114318-463714131.gif)\n",
    "\n",
    "### 7.3.新思路\n",
    "\n",
    "其实很多时候都是因为height设置100%，它不生效，所以才各种样式来调节\n",
    "\n",
    "可以这样设置来达到目的：**`设置宽度100%，高度100vh`**（整个屏幕默认满屏为100vh）\n",
    "> PS：地图用的比较多\n",
    "\n",
    "扩展：\n",
    "- <a href=\"https://blog.csdn.net/qq_31496003/article/details/81095614\">微信小程序之图片处理</a>\n",
    "- <a href=\"https://www.jianshu.com/p/0d0a0c7da4d3\">关于小程序widthFix图片高度不能自适应的问题</a>\n",
    "\n",
    "---\n",
    "\n",
    "## 8.页面跳转\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/7goto>\n",
    "\n",
    "`知识点`：\n",
    "- **通过方法跳转：`wx.navigateTo({url:\"url地址\"})`**\n",
    "    - 官方文档：<https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html>\n",
    "- **页面直接跳转：`<navigator url='url地址'>xxx</navigator>`**\n",
    "    - 官方文档：<https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html>\n",
    "    - PS：**`open-type`**属性可以关注一下：\n",
    "演示demo：\n",
    "\n",
    "先看一下目录结构：\n",
    "![9.目录结构.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326151327051-150295575.png)\n",
    "\n",
    "index页面\n",
    "```html\n",
    "<view class='container'>\n",
    "  <view>\n",
    "    <navigator url='{{url}}' hover-class='hover'>链接跳转</navigator>\n",
    "  </view>\n",
    "  <view hover-class='hover' bindtap='to_page' data-url='{{url}}'>方法跳转</view>\n",
    "  <view hover-class='hover' bindtap='goto_page' data-url='{{url2}}'>带参跳转</view>\n",
    "</view>\n",
    "```\n",
    "index脚本：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    name: '小明',\n",
    "    age: 22,\n",
    "    url: '../1data/update_info',\n",
    "    url2: './main'\n",
    "  },\n",
    "  onLoad: function(options) {\n",
    "\n",
    "  },\n",
    "  to_page: e => {\n",
    "    // 页面跳转\n",
    "    wx.navigateTo({\n",
    "      url: e.currentTarget.dataset.url\n",
    "    })\n",
    "  },\n",
    "  goto_page: function(e) {\n",
    "    var that = this;\n",
    "    // 页面跳转\n",
    "    wx.navigateTo({\n",
    "      url: `${e.currentTarget.dataset.url}?name=${that.data.name}&age=${that.data.age}`\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "main页面：\n",
    "```html\n",
    "<view class='container'>\n",
    "  <view>{{name}}</view>\n",
    "  <view>{{age}}</view>\n",
    "</view>\n",
    "```\n",
    "main脚本：\n",
    "```js\n",
    "Page({\n",
    "  data: {},\n",
    "  onLoad: function(pms) {\n",
    "    console.log(pms);\n",
    "\n",
    "    var that = this;\n",
    "    // 设置data值\n",
    "    this.setData({\n",
    "      name: pms.name,\n",
    "      age: pms.age\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "动态演示：\n",
    "![9.跳转.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326151114427-1912999017.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "这些东西都是用API，算是比较简单的了，就是找起来麻烦点，时间不早了，地图这块我再贴一个案例就先结束吧\n",
    "\n",
    "## 9.地图相关\n",
    "\n",
    "源码：<https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/8map>\n",
    "\n",
    "### 9.1.简单案例\n",
    "\n",
    "`知识点`：\n",
    "- **`wx.getLocation({success:成功执行的方法,fail:失败执行的方法})`：获取经纬度**\n",
    "- **`wx.openLocation({latitude: 经度值, longitude: 纬度值})`：显示对应位置的地图**\n",
    "\n",
    "wxml：\n",
    "```html\n",
    "<view>\n",
    "  <button bindtap='get_location'>{{demo1}}</button>\n",
    "  <button bindtap='open_location'>{{demo2}}</button>\n",
    "</view>\n",
    "```\n",
    "js源码：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    demo1: '获取经纬',\n",
    "    demo2: '打开地图',\n",
    "    lon: 120.636146,\n",
    "    lat: 31.25893\n",
    "  },\n",
    "  onLoad: function(options) {},\n",
    "  // 需要使用this的时候，最外面方法老老实实写function()\n",
    "  get_location: function() {\n",
    "    var that = this;\n",
    "    // 获取经纬度\n",
    "    wx.getLocation({\n",
    "      // 成功的时候\n",
    "      success: res => {\n",
    "        console.log(res.latitude, res.longitude, res.speed, res.accuracy);\n",
    "        // 更新页面数据\n",
    "        that.setData({\n",
    "          lon: res.longitude,\n",
    "          lat: res.latitude\n",
    "        });\n",
    "        // 弹框提醒\n",
    "        wx.showToast({\n",
    "          title: `(${res.longitude}，${res.latitude})`, // ES6语法\n",
    "          icon: 'none'\n",
    "        });\n",
    "      },\n",
    "      // 失败的时候\n",
    "      fail: ex => {\n",
    "        // 弹框提醒\n",
    "        wx.showToast({\n",
    "          title: '定位未授权，请重新授权：\\r\\n删除小程序后再打开',\n",
    "          icon: 'none'\n",
    "        });\n",
    "      }\n",
    "    });\n",
    "  },\n",
    "  // 打开位置\n",
    "  open_location: function() {\n",
    "    var that = this;\n",
    "    // 打开位置\n",
    "    wx.openLocation({\n",
    "      latitude: that.data.lat,\n",
    "      longitude: that.data.lon\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "**简单说下成功之后的参数含义**：\n",
    "- `res.longitude`：经度\n",
    "- `res.latitude`：纬度\n",
    "- `res.speed`：移动速度（实时定位的时候用的多）\n",
    "- `res.accuracy`：精确度（一般低于50，经纬数据就偏差太多）\n",
    "\n",
    "失败摸拟：\n",
    "![10.获取失败.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326204908335-1529831664.gif)\n",
    "\n",
    "成功摸拟：\n",
    "![10.成功获取.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326204920797-786094848.gif)\n",
    "\n",
    "**额外说明：需要配置一下你需要使用的权限**\n",
    "![10.权限声明.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326204940995-1736596599.png)\n",
    "\n",
    "PS：授权之后，在开发的时候可以清楚状态（现实中重新授权需要`删除小程序再打开`）\n",
    "![10.清除状态.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326204949678-716674858.png)\n",
    "\n",
    "---\n",
    "\n",
    "### 9.2.Map组件\n",
    "\n",
    "官方文档：<https://developers.weixin.qq.com/miniprogram/dev/component/map.html>\n",
    "\n",
    "#### 1.简单案例扩展\n",
    "\n",
    "先看下简单案例的扩展：\n",
    "\n",
    "**在打开地图的时候指定`address`** 可以更人性化显示：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    lon: 120.674297,\n",
    "    lat: 31.324571\n",
    "  },\n",
    "open_location: function() {\n",
    "    var that = this;\n",
    "    // 打开位置\n",
    "    wx.openLocation({\n",
    "      latitude: that.data.lat,\n",
    "      longitude: that.data.lon,\n",
    "      // scale: 10, // 缩放级别（5~18）默认是18\n",
    "      address: '江苏省苏州市工业园区都市花园' // 这个信息可以通过地图api逆向解析\n",
    "    });\n",
    "  }\n",
    "})\n",
    "```\n",
    "效果：\n",
    "![10.位置信息.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326221239839-525522820.png)\n",
    "\n",
    "#### 2.Map组件案例\n",
    "\n",
    "`知识点`：\n",
    "- **`show-location`：显示当前定位点**\n",
    "- **`markers`：多个标识**\n",
    "- **`bindmarkertap`：标记点击事件**\n",
    "- **满屏设置：`width:100%;height:100vh`**\n",
    "\n",
    "wxml：\n",
    "```html\n",
    "<view>\n",
    "  <map longitude='{{lon}}' latitude='{{lat}}' markers='{{markers}}' show-location='true' bindmarkertap='makertap' style='width:100%;height:100vh'></map>\n",
    "  <!--  -->\n",
    "</view>\n",
    "```\n",
    "JS：\n",
    "```js\n",
    "Page({\n",
    "  data: {\n",
    "    lon: 120.674297,\n",
    "    lat: 31.324571,\n",
    "    markers: []\n",
    "  },\n",
    "  // 页面加载\n",
    "  onLoad: function() {\n",
    "    var that = this;\n",
    "    // eg：可以通过baidu Map获取到markers信息\n",
    "    // BMap.regeocoding({success: ret => {ret.wxMarkerData}});\n",
    "    // 假设通过API获取到了数据\n",
    "    that.setData({\n",
    "      markers: [{\n",
    "        id: 0,\n",
    "        latitude: that.data.lat,\n",
    "        longitude: that.data.lon,\n",
    "        address: '江苏省苏州市工业园区都市花园',\n",
    "        iconPath: '/images/marker_red.png',\n",
    "        callout: {\n",
    "          'content': '江苏省苏州市工业园区都市花园',\n",
    "          'bgColor': '#fff',\n",
    "          'color': '#f00',\n",
    "          'padding': 15,\n",
    "          'display': 'ALWAYS', // BYCLICK：点击显示\n",
    "          'borderRadius': 5\n",
    "        }\n",
    "      }]\n",
    "    });\n",
    "  },\n",
    "  // 标记点击事件\n",
    "  makertap: function(e) {\n",
    "    var that = this;\n",
    "    // 提示\n",
    "    wx.showToast({\n",
    "      title: `点击了标记点${e.markerId}`,\n",
    "      icon: 'none'\n",
    "    });\n",
    "    // 可以根据e.markerId获取marker信息\n",
    "    console.log(that.data.markers[e.markerId]);\n",
    "  }\n",
    "})\n",
    "```\n",
    "动态演示：\n",
    "![10.点击标记.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190326230453128-1140451874.gif)\n",
    "\n",
    "PS：可以通过经纬信息来获取对应的位置信息（`最后一个百度地图的demo里有贴`）\n",
    "> 官方文档：<http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation>\n",
    "\n",
    "我还写了一个惯连的案例，这边就不演示了，给大家课后自测吧：\n",
    "![10.自测.gif](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327070906920-2041141046.png)\n",
    "\n",
    "PS：在使用外部链接的时候需要添加到白名单中（补充说明里有贴哦~）"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 补充说明\n",
    "\n",
    "### 1.关于调试\n",
    "\n",
    "开发的时候可以在手机中预览，也可以真机调试把输出信息直接显示到PC端：\n",
    "![调试.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327071353592-1174322290.png)\n",
    "\n",
    "手机调试可以打开调试模式：\n",
    "![开启调试.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327072716642-1678919687.png)\n",
    "\n",
    "之后的操作都会记录，而且控制台输出也会显示：\n",
    "![效果预览.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327073051489-541846628.png)\n",
    "![显示信息.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327072923504-343822558.png)\n",
    "\n",
    "### 2.关于开发者设置\n",
    "\n",
    "有了AppID，并不可以开发，还需要是开发者|管理员：\n",
    "![添加开发者.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327071911494-1434445242.png)\n",
    "\n",
    "在没有上线前，职工开发和体验成员使用：\n",
    "![预览和体验.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327072056187-1929845025.png)\n",
    "\n",
    "### 3.关于网络资源的说明\n",
    "\n",
    "在使用外部链接的时候需要添加到白名单中（网站必须备案过）\n",
    "![添加域名.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327072310859-1371514052.png)\n",
    "\n",
    "### 4.发布和预览\n",
    "\n",
    "先要上传代码：\n",
    "![上传.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327073202245-543152913.png)\n",
    "![上传2.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327073329536-1802599638.png)\n",
    "\n",
    "这时候可以选择\n",
    "![设置体验版.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327073447267-284556829.png)\n",
    "![体验首页.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327073558499-1521502462.png)\n",
    "![可体验.png](https://img2018.cnblogs.com/blog/1127869/201903/1127869-20190327073709420-615345948.png)\n",
    "\n",
    "PS：提交核审后就可以上线了（不推荐把自己做的demo提交核审，腾讯会处罚的~）\n",
    "\n",
    "现在小程序提供了`云开发`的API（可以当做`数据库`+`文件上传下载`）感兴趣的可以先了解下：\n",
    "> <https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html>\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Javascript (Node.js)",
   "language": "javascript",
   "name": "javascript"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
